<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由-基本</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>

<body>
<div id="app">
    <h1>路由导航</h1>
    <!--这是路由入口，点击跳转-->
    <router-link to="/nima">nima</router-link>
    <router-link to="/hehe">hehe</router-link>
    <!--路由出口。内容渲染在此-->
    <router-view ></router-view>
</div>

<script>
    // 1定义路由组件对象。实际上可以拆分到另一个文件中，通过import导入
    var nimaR = {template:"<div style='background-color: chocolate'>尼玛达</div>"};
    var heheR = {template:"<div style='background-color: dodgerblue'>呵呵哒</div>"};

    // 2导入路由对象。定义路由列表
    var routes = [
        {path:"/nima",component:nimaR},
        {path:"/hehe",component:heheR},
    ];

    //3 创建Vue路由实例
    var vueRouter = new VueRouter({routes:routes});

    //4 挂载路由
    var v = new Vue({router:vueRouter}).$mount("#app");


</script>

</body>
</html>